<template>

  <el-table border v-if="tableDatas && tableDatas.length>0" :data="tableDatas" style="width: 100%; margin-top: 10px">
    <el-table-column label="序号" width="50" align="center">
      <template slot-scope="scope">
        <span>{{scope.$index+1}}</span>
      </template>
    </el-table-column>

    <el-table-column label="图片" width="100">
      <template slot-scope="scope">
          <el-image v-if="scope.row.productImg != null && scope.row.productImg != '' " slot="reference"
            :src="scope.row.productImg" class="image-rows" :preview-src-list="[scope.row.productImg]">
          </el-image>
      </template>
    </el-table-column>
    <el-table-column label="商品名称" min-width="180">
      <template #default="scope">
        <span>{{ scope.row.productName }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="open" label="价格" width="60">
      <template #default="scope">
        <span>{{ scope.row.retailPrice }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="open" label="库存" width="60">
      <template #default="scope">
        <span>{{ scope.row.stockNumber }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" style="text-align: right;" width="80">
      <template #default="scope">
        <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script>
  export default {
    props: {
      tabUids: {
        type: Array,
        default: []
      },
      tabList: {
        type: Array,
        default: []
      },
      isShow: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        zIndex:3000,
        open: this.isShow,
        tableDatas: this.tabList,
      }
    },
    methods: {
      handleDelete(index, row) {
        // this.tabUids = "";//避免直接修改属性

        let uid = this.tabUids;
        uid.splice(index, 1);

        this.tableDatas.splice(index, 1);
        this.$emit('tabRespon', this.tableDatas, uid)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .image-rows {
    width: 80px;
    height: 80px;
  }
</style>
